<template>
  <view class="container">	
		<view class="user-info flex-wrap">
			<view class="avatar">
				<image :src="isLogin ? user.photo : $getOSSImg('default_avatar.png')" mode="aspectFill"></image>
			</view>
			<view class="cont">
				<block v-if="isLogin">
					<view class="info-box flex-align">
						<view class="name">{{ user.nickname }}</view>
						<view class="label">普通用戶ID：{{ user.id }}</view>
					</view>
					<view class="integral">我的積分：{{ user.balance }}</view>
					<view class="notice-box">
						<view v-for="(item, index) in pointList" :key="index" class="notice-item">{{ item.text }}</view>
					</view>
				</block>
				<view v-else class="login-tips" @click="checkLogin">
					<view class="title">點擊登錄</view>
					<view class="sub-title">登錄可以查看更多信息</view>
				</view>
			</view>
		</view>
		<view class="app-list">
			<view v-for="(item, index) in appList" :key="index" class="app-item flex-space-b" @click="navigator(item)">
				<view class="cont flex-align">
					<image :src="$getOSSImg(item.icon)" mode="aspectFill"></image>
					<text>{{ item.name }}</text>
				</view>
				<u-icon name="arrow-right" color="#C0C4CC" size="14"></u-icon>
			</view>
		</view>
		<!-- 自定义tabbar -->
		<tabbar :current="3" />
		<!-- 登录弹窗 -->
		<login-pop @update="getPointList" />
		<!-- 协议弹窗 -->
		<protocol-pop />
	</view>
</template>

<script>
	import tabbar from '@/components/Tabbar/index'
	import { getBdCustomPoint } from '@/api/user'
  export default {
		components: { tabbar },
		data() {
			return {
				pointList: [],
				appList: [{
					icon: 'mine/action_icon1.png',
					url: '/pages/mine/order',
					name: '已報課程',
					needLogin: true
				}, {
					icon: 'mine/action_icon2.png',
					url: '/pages/mine/mall',
					name: '積分商城',
					needLogin: true
				},{
					icon: 'mine/action_icon3.png',
					url: '/pages/mine/coupon',
					name: '我的優惠',
					needLogin: true
				},{
					icon: 'mine/action_icon4.png',
					url: '/pages/mine/record',
					name: '兌換記錄',
					needLogin: true
				},{
					icon: 'mine/action_icon5.png',
					url: '/pages/mine/collect',
					name: '我的收藏',
					needLogin: true
				},{
					icon: 'mine/action_icon6.png',
					url: '/pages/protocol?tags=aboutuskey',
					name: '關於我們',
					needLogin: false
				}]
			}
		},
		async onShow() {
			if (this.isLogin) {
				this.$store.dispatch('updateUserInfo')
				this.getPointList()
			}
		},
		methods: {
			async navigator(row) {
				if (row.needLogin) {
					await this.checkLogin()
				}
				this.$navigator(row.url)
			},
			async getPointList() {
				const { data }  = await getBdCustomPoint({}, { needLoading: false })
				data.map(v => {
					v.text = `${v.enddateStr} 到期积分：${v.point}`
				})
				this.pointList = data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #FFFFFF;
	}
	.user-info {
		background-image: linear-gradient(30deg, #FFFFFF, #FFFCEF);
		border-bottom: 16rpx solid #F9F9F9;
		padding: 32rpx 60rpx;
		box-sizing: border-box;
		.avatar {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			image {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
				border: 2rpx solid #fff;
				box-shadow: 0 8rpx 8rpx 0 rgba(0, 0, 0, 0.25);
			}
		}
		.cont {
			flex: 1;
			.login-tips {
				padding: 0 0 20rpx 10rpx;
				.title {
					color: #333333;
					padding: 20rpx 0;
				}
				.sub-title {
					color: #909193;
					font-size: 24rpx;
				}
			}
			.info-box {
				margin-bottom: 6rpx;
				.name {
					color: #333333;
					font-size: 40rpx;
					font-weight: 500;
				}
				.label {
					display: inline-block;
					margin-left: 32rpx;
					padding: 0 20rpx;
					height: 34rpx;
					line-height: 34rpx;
					background: #3B3530;
					border-radius: 40rpx;
					color: #E7E9AD;
					font-size: 22rpx;
				}
			}
			.integral {
				color: #FFC300;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 6rpx;
			}
			.notice-box {
				max-height: 114rpx;
				overflow-y: scroll;
				.notice-item {
					height: 32rpx;
					color: #909193;
					font-size: 24rpx;
					margin-bottom: 6rpx;
				}
			}
		}
	}
	.app-list {
		padding: 30rpx 60rpx;
		.app-item {
			padding: 30rpx 0;
			margin-bottom: 20rpx;
			.cont {
				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
				}
				color: #303133;
				font-size: 30rpx;
				font-weight: 500;
			}
		}
	}
</style>
